<template>
  <div id="work_platform_org" class="container">
    <div class="content">
      <el-row class="panel" style="margin-top: 0.1rem;height:0.65rem;">
        <el-col :span="2">
          <div class="title-head">
            <div @click="menuChange(1)" :class='menuIndex==1?"select":""'>数据概览</div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="title-head" >
            <div @click="menuChange(2)" :class='menuIndex==2?"select":""'>校区列表</div>
          </div>
        </el-col>
      </el-row>

      <el-row class="panel" v-show="menuIndex==1" style="height:5.64rem;">
        <el-row>
          <span class="title-sub">校区数据概览</span>
        </el-row>
        <el-row style="margin-top:0.1rem;">
          <el-col :span="12" style="height:4.9rem;">
            <chinaMap ref="chinaMap" @selectProvince="selectProvince"></chinaMap>
          </el-col>
          <el-col :span="12" style="height:4.9rem;">
            <barChart ref="barChart" @provinceChange="barChartprovinceChange" @cityChange="barChartcityChange"></barChart>
          </el-col>
        </el-row>
      </el-row>
      <el-row v-show="menuIndex==1">
        <div class="box-statistic">
          <div class="box-left">
            <div class="box-schooldata panel">
              <div class="title-sub">校区开通数据</div>
              <div class="box-item">
                <div class="item">
                  <div class="img school-sum"></div>
                  <div class="box-value">
                    <div class="value">{{staticTotalData.schoolData}}</div>
                    <div class="label">校区总数</div>
                  </div>
                </div>
                <div class="item">
                  <div class="img school-add"></div>
                  <div class="box-value">
                    <div class="value">{{staticMonthData.schoolData}}<div class="img arrow-up"></div></div>
                    <div class="label">本月新增校区</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-teacherdata panel">
              <div class="title-sub">教师数据</div>
              <div class="box-item">
                <div class="item">
                  <div class="img teacher-sum"></div>
                  <div class="box-value">
                    <div class="value">{{staticTotalData.teacherData}}</div>
                    <div class="label">教师总数</div>
                  </div>
                </div>
                <div class="item">
                  <div class="img teacher-add"></div>
                  <div class="box-value">
                    <div class="value">{{staticMonthData.teacherData}}<div class="img arrow-up"></div></div>
                    <div class="label">本月新增教师</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box-center panel">
            <div class="title-sub">招生数据</div>
            <div class="box-item">
              <div class="item">
                <div class="img clue-sum"></div>
                <div class="box-value">
                  <div class="value">{{staticTotalData.clueData}}</div>
                  <div class="label">线索总数</div>
                </div>
              </div>
              <div class="item" style="border-left: solid 0.01rem #edf2f9;border-bottom: solid 0.01rem #edf2f9;">
                <div class="img clue-add"></div>
                <div class="box-value">
                  <div class="value">{{staticMonthData.clueData}}<div class="img arrow-up"></div></div>
                  <div class="label">本月新增线索</div>
                </div>
              </div>
              <div class="item" style="border-top: solid 0.01rem #edf2f9;border-right: solid 0.01rem #edf2f9;">
                <div class="img student-sum"></div>
                <div class="box-value">
                  <div class="value">{{staticTotalData.studentData}}</div>
                  <div class="label">学员总数</div>
                </div>
              </div>
              <div class="item">
                <div class="img student-add"></div>
                <div class="box-value">
                  <div class="value">{{staticMonthData.studentData}}<div class="img arrow-up"></div></div>
                  <div class="label">本月新增学员</div>
                </div>
              </div>
            </div>
          </div>
          <div class="box-right panel">
            <div class="title-sub">教务数据</div>
            <div class="box-item">
              <div class="item">
                <div class="img course-sum"></div>
                <div class="splitline"></div>
                <div class="box-value">
                  <div class="value">{{staticTotalData.courseData}}</div>
                  <div class="label">课程总数</div>
                </div>
              </div>
              <div class="item">
                <div class="img class-sum"></div>
                <div class="splitline"></div>
                <div class="box-value">
                  <div class="value">{{staticTotalData.classData}}</div>
                  <div class="label">班级总数</div>
                </div>
              </div>
              <div class="item">
                <div class="img class-add"></div>
                <div class="splitline"></div>
                <div class="box-value">
                  <div class="value">{{staticMonthData.classData}}<div class="img arrow-up"></div></div>
                  <div class="label">本月新增班级</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-row>

      <el-row v-if="menuIndex==2" class="panel">
         <schoolTable></schoolTable>
      </el-row>

    </div>
  </div>
</template>

<script>
// import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import citys from "@/../static/citys.json"
import menuTool from "@/js/common/menu";
import relogin from "@/js/common/org_relogin";
import chinaMap from '@/components/work_platform/common/wp_chart_map'
import barChart from '@/components/work_platform/common/wp_chart_bar'
import schoolTable from '@/components/work_platform/common/wp_school_table'
let vm;
let user;
export default {
  components:{chinaMap,barChart,schoolTable},
  data() {
    return {
      menuIndex:1,
      campusStatisticsData: {},
      orgId:'',
      //校区地理分布数据
      schoolTotalData:{
        schoolData:[],
        incomeData:[],
        consumeData:[],
        clueData:[],
        studentData:[],
        classData:[],
        teacherData:[],
        courseData:[],
      },
      staticTotalData:{
        schoolData:0,
        clueData:0,
        studentData:0,
        classData:0,
        teacherData:0,
        courseData:0
      },
      schoolMonthData:{
        schoolData:[],
        incomeData:[],
        consumeData:[],
        clueData:[],
        studentData:[],
        classData:[],
        teacherData:[],
      },
      staticMonthData:{
        schoolData:0,
        clueData:0,
        studentData:0,
        classData:0,
        teacherData:0,
      },
    };
  },
  methods: {
    init() {
      this.initData();
    },
    /**
     * 初始化数据
     */
    initData() {
      this.api_totalData();
      this.api_curMonthData();
      this.api_courseData();
    },
    menuChange(val){
      if(this.menuIndex==val)return;
      this.menuIndex=val;
      if(val==1){
        this.initData();
      }
      else{

      }
    },
    api_totalData(){
      let startTime=null,endTime=null;
      vm.$refs['chinaMap'].loadChart(vm.schoolTotalData);
      api.campusNumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.schoolData=data.info;
          vm.calculateTotal(vm.schoolTotalData,vm.staticTotalData,'schoolData','schoolData');
          return api.incomeSumMoneyByProvince({startTime:startTime,endTime:endTime});
        }
      }).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.incomeData=data.info;
          return api.consumeMoneySumByProvince({startTime:startTime,endTime:endTime});
        }
      }).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.consumeData=data.info;
          return api.clueNumByProvince({startTime:startTime,endTime:endTime});
        }
      }).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.clueData=data.info;
          vm.calculateTotal(vm.schoolTotalData,vm.staticTotalData,'clueData','clueData');
          return api.studentNumByProvince({startTime:startTime,endTime:endTime});
        }
      }).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.studentData=data.info;
          vm.calculateTotal(vm.schoolTotalData,vm.staticTotalData,'studentData','studentData');
          return api.classNumByProvince({startTime:startTime,endTime:endTime});
        }
      }).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.classData=data.info;
          vm.calculateTotal(vm.schoolTotalData,vm.staticTotalData,'classData','classData');
          return api.teacherNumByProvince({startTime:startTime,endTime:endTime});
        }
      }).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.teacherData=data.info;
          vm.calculateTotal(vm.schoolTotalData,vm.staticTotalData,'teacherData','teacherData');
          vm.$refs['chinaMap'].loadChart(vm.schoolTotalData);
        }
      })
    },
    api_curMonthData(){
      let t=tool.getTimeObjByType(3);
      let startTime=t.startTime,endTime=t.endTime;
      api.campusNumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.schoolData=data.info;
          vm.calculateTotal(vm.schoolMonthData,vm.staticMonthData,'schoolData','schoolData');
        }
      });
      api.incomeSumMoneyByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.incomeData=data.info;
        }
      });
      api.consumeMoneySumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.consumeData=data.info;
        }
      });
      api.clueNumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.clueData=data.info;
          vm.calculateTotal(vm.schoolMonthData,vm.staticMonthData,'clueData','clueData');
        }
      });
      api.studentNumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.studentData=data.info;
          vm.calculateTotal(vm.schoolMonthData,vm.staticMonthData,'studentData','studentData');
        }
      });
      api.classNumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.classData=data.info;
          vm.calculateTotal(vm.schoolMonthData,vm.staticMonthData,'classData','classData');
        }
      });
      api.teacherNumByProvince({startTime:startTime,endTime:endTime}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolMonthData.teacherData=data.info;
          vm.calculateTotal(vm.schoolMonthData,vm.staticMonthData,'teacherData','teacherData');
        }
      })
    },
    api_courseData(){
      api.queryCourseNumByArea({startTime:null,endTime:null}).then(function(data){
        if(data.resultCode==2000){
          vm.schoolTotalData.courseData=data.info;
          vm.calculateTotal(vm.schoolTotalData,vm.staticTotalData,'courseData','courseData');
        }
      });
    },
    calculateTotal(data,todata,listkey,totalkey,vkey='totalValue'){
      let sum=0;
      data[listkey].forEach(ele=>{
        sum+=(ele[vkey]||0);
      });
      todata[totalkey]=sum;
    },
    barChartprovinceChange(val){
      this.calculateStaticData(val);
    },
    barChartcityChange(val){
      this.calculateStaticData(val[0],val[1]);
    },
    calculateStaticData(provinceId=null,cityId=null){
      
      if(!provinceId){//省份、城市都不选
        this.initData();
        return;
      }
      if(!cityId)//只选省份
      {
        this.staticTotalData={
          schoolData:0,
          clueData:0,
          studentData:0,
          classData:0,
          teacherData:0,
          courseData:0
        };
        this.staticMonthData={
          schoolData:0,
          clueData:0,
          studentData:0,
          classData:0,
          teacherData:0,
        };
        for(let k in this.schoolTotalData){
          let list=this.schoolTotalData[k];
          for(let i=0;i<list.length;i++){
            if(list[i].province==provinceId){
              this.staticTotalData[k]=list[i].totalValue||0;
              break;
            }
          }
        };
        for(let k in this.schoolMonthData){
          let list=this.schoolMonthData[k];
          for(let i=0;i<list.length;i++){
            if(list[i].province==provinceId){
              this.staticMonthData[k]=list[i].totalValue||0;
              break;
            }
          }
        };
        return
      }
      //省份、城市都选
      this.staticTotalData={
        schoolData:0,
        clueData:0,
        studentData:0,
        classData:0,
        teacherData:0,
        courseData:0
      };
      this.staticMonthData={
        schoolData:0,
        clueData:0,
        studentData:0,
        classData:0,
        teacherData:0,
      };
      for(let k in this.schoolTotalData){
        let list=this.schoolTotalData[k];
        for(let i=0;i<list.length;i++){
          if(list[i].province==provinceId){
            for(let j=0;j<list[i].cityData.length;j++){
              if(list[i].cityData[j].city==cityId){
                this.staticTotalData[k]=list[i].cityData[j].totalValue||0;
                break;
              }
            }
            break;
          }
        }
      };
      for(let k in this.schoolMonthData){
        let list=this.schoolMonthData[k];
        for(let i=0;i<list.length;i++){
          if(list[i].province==provinceId){
            for(let j=0;j<list[i].cityData.length;j++){
              if(list[i].cityData[j].city==cityId){
                this.staticMonthData[k]=list[i].cityData[j].totalValue||0;
                break;
              }
            }
            break;
          }
        }
      };
    },
    /**地图选择省份-联动-柱状图选择省份 */
    selectProvince(param){
      this.$refs['barChart'].setSelectProvince(param);
    },
  },
  mounted() {
    vm = this;
    // let user = tool.getItem(lsKey.user, true); //得到当前用户信息
    // this.orgId=user.orgId;
  },
  beforeDestroy(){
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
#work_platform_org {
  .content{
    width: 15.48rem;
    margin: 0 auto;
    padding-bottom: 0.3rem;
    letter-spacing: 0.01rem;
  }
  .panel{
      background-color: white;
      border: 0.01rem solid #ededed;
      border-radius: 0.1rem;
      padding: 0 0.3rem 0.3rem 0.3rem;
      color: #666666;
  }
  .title-head{
    font-size: 0.16rem;
    color: #666666;
    height: 0.63rem;
    div{
      cursor: pointer;
      height: 0.63rem;
      width: 0.8rem;
      padding: 0 0.05rem;
      line-height: 0.63rem;
    }
    div.select{
      color: #000000;
      border-bottom: solid 0.04rem #3885f8;
    }
  }
  .title-sub{
    color: #010101;
    font-size: 0.18rem;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 1px;
  }
  .el-row{
    margin-top: 0.2rem;
  }
  
  .box-statistic{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .title-sub{
      width: 100%;
      margin-top: 0.2rem;
      color: #010101;
      font-size: 0.18rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 1px;
    }
    .box-item{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item{
        width: 50%;
        display: flex;
        justify-content: flex-start;
        .img{
          width: 0.44rem;
          height: 0.44rem;
          margin-top: 0.1rem;
          margin-left: 0.4rem;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .box-value{
          margin-left: 0.2rem;
          .value{
            font-size: 0.3rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #33383c;
          }
          .label{
            font-size: 0.14rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #33383c;
          }
        }
      }
    }
    .box-left,.box-center,.box-right{
      height: 3.48rem;
      width: 5.45rem;
    }
    .box-left{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .box-item{
        margin-top: 0.3rem;
      }
      .box-schooldata{
        height: 1.64rem;
        background-color: #5458e1 !important;
        .title-sub,.value,.label{
          color: white !important;
        }
        .value{

        }
      }
      .box-teacherdata{
        height: 1.64rem;
      }
    }
    .box-center{
      .box-item{
        justify-content: center;
        align-content: center;
        margin-top: 0.25rem;
        .item{
          height: 1.2rem;
          align-items: center;
        }
        .item:first-child {
          border-right: solid 0.01rem #edf2f9;
          border-bottom: solid 0.01rem #edf2f9;
        }
        .item:last-child {
          border-left: solid 0.01rem #edf2f9;
          border-top: solid 0.01rem #edf2f9;
        }
      }
    }
    .box-right{
      width: 4.2rem;
      .box-item{
        .item{
          width: 100%;
          margin-top: 0.25rem;
          // justify-content: space-between;
          .splitline{
            height: 100%;
            width: 0.01rem;
            border-right: solid 0.02rem #edf2f9;
            margin: 0 0.4rem;
          }
          .box-value{
            margin-left: 0rem;
          }
        }
      }
    }

    .img.school-sum{
      background-image: url(~@/assets/img/workPlatform/org_school_sum.png);
    }
    .img.school-add{
      background-image: url(~@/assets/img/workPlatform/org_school_add.png);
    }
    .img.teacher-sum{
      background-image: url(~@/assets/img/workPlatform/org_teacher_sum.png);
    }
    .img.teacher-add{
      background-image: url(~@/assets/img/workPlatform/org_teacher_add.png);
    }
    .img.clue-sum{
      background-image: url(~@/assets/img/workPlatform/org_clue_sum.png);
    }
    .img.clue-add{
      background-image: url(~@/assets/img/workPlatform/org_clue_add.png);
    }
    .img.student-sum{
      background-image: url(~@/assets/img/workPlatform/org_student_sum.png);
    }
    .img.student-add{
      background-image: url(~@/assets/img/workPlatform/org_student_add.png);
    }
    .img.course-sum{
      background-image: url(~@/assets/img/workPlatform/org_course_sum.png);
    }
    .img.class-sum{
      background-image: url(~@/assets/img/workPlatform/org_class_sum.png);
    }
    .img.class-add{
      background-image: url(~@/assets/img/workPlatform/org_class_add.png);
    }
    .img.arrow-up{
      display: inline-block;
      margin-top: 0 !important;
      margin-left: 0.05rem !important;
      width: 0.1rem !important;
      height: 0.12rem !important;
      background-image: url(~@/assets/img/workPlatform/org_arrow.png);
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
